<template>
  <h2 class="form-title">文章发布表单</h2>
  <el-form
      ref="ruleFormRef"
      style="max-width: 600px"
      :model="ruleForm"
      :rules="rules"
      label-width="auto"
      class="demo-ruleForm"
      :size="formSize"
      status-icon
  >
    <el-form-item label="发布人" prop="username" class="input-round-border">
      <el-input v-model="ruleForm.username"/>
    </el-form-item>
    <el-form-item label="标题" prop="title" class="input-round-border">
      <el-input v-model="ruleForm.title"/>
    </el-form-item>

    <el-form-item label="发布内容" prop="desc" class="input-round-border">
      <el-input v-model="ruleForm.content" type="textarea"/>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm(ruleFormRef)" class="publish-button">
        发布
      </el-button>
      <el-button @click="resetForm(ruleFormRef)" class="reset-button">重置</el-button>
    </el-form-item>
  </el-form>
</template>

<script lang="ts" setup>
import {reactive, ref} from 'vue'
import {type ComponentSize, ElMessage, type FormInstance, type FormRules} from 'element-plus'
import axios from "axios";

interface RuleForm {
  username: string
  title: string
  content: string
}

const formSize = ref<ComponentSize>('default')
const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive<RuleForm>({
  username: 'Hello',
  title: '',
  content: '',
})

const locationOptions = ['Home', 'Company', 'School']

const rules = reactive<FormRules<RuleForm>>({
  username: [
    {required: true, message: '请输入用户名', trigger: 'blur'},
    {min: 3, max: 10, message: 'Length should be 3 to 10', trigger: 'blur'}
  ],
  title: [
    {required: true, message: '请输入标题', trigger: 'blur'},
    {min: 1, max: 10, message: 'Length should be 3 to 10', trigger: 'blur'}
  ],
  content: [
    {required: true, message: '请输入文章内容', trigger: 'blur'}
  ],
})

const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      console.log('submit!')
      axios.post("http://localhost:8090/addArticle", ruleForm).then(res => {
        console.log(res)
      })
      ElMessage.success("发布成功！！！")
    } else {
      console.log('error submit!', fields)
    }
  })
}

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.resetFields()
}

const options = Array.from({length: 10000}).map((_, idx) => ({
  value: `${idx + 1}`,
  label: `${idx + 1}`,
}))
</script>

<style>
.form-container {
  display: flex;
  flex-direction: column; /* 子元素垂直排列 */
  align-items: center; /* 水平居中子元素 */
  justify-content: center; /* 垂直居中子元素 */
  height: 100vh; /* 让容器占满视口高度，方便更好地垂直居中，可根据实际情况调整 */

}

.publish-button {
  margin-left: 50px;
}
.reset-button {
  margin-left: 20px;
}

.form-title {
  text-align: center;
  color:#000000;
  margin-bottom: 20px;
  font-size: 50px; /* 增大标题字体大小 */
  text-indent: -300px;
}

.demo-ruleForm {
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #f9f9f9;
  padding: 20px;
  border: 2px solid #F8BBD0; /* 设置边框为 2px 宽的浅粉色实线，颜色值可按需调整 */
  border-radius: 15px; /* 设置圆角半径为 15px，可根据喜好改变大小 */
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
  height: 250px;
}

.demo-ruleForm.el-form-item {
  margin-bottom: 15px;
}

.demo-ruleForm.el-input__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  border-radius: 8px;
  border: 1px solid #ccc;
  font-size: 14px;
  color: #333;
}

.demo-ruleForm.el-input__inner textarea {
  resize: none;
  height: 100%;
}

.input-round-border.el-input__inner {
  border-radius: 20px;
  border: 1px solid #ccc;
}

.demo-ruleForm.el-button {

  padding: 10px 25px;
  border-radius: 5px;
  transition: all 0.3s ease;
  background-color: #f0f0f0;
  border: none;
  color: #606266;
}

.demo-ruleForm.el-button[type="primary"] {
  background-color: #409EFF;
  border: none;
  color: white;
}

.demo-ruleForm.el-button[type="primary"]:hover {
  background-color: #66b1ff;
}

.demo-ruleForm.el-button:hover {
  background-color: #e0e0e0;
  transform: translateY(-2px);
}
</style>